<template>
  <div class="content">
    <el-input
      class="eltext"
      v-model="textarea"
      :rows="30"
      type="textarea"
      placeholder="Please input"
    />
    <el-button @click="formatClick">校验/格式化</el-button>
    <el-input v-model="tipsValue" :rows="3" :readonly="readonly" type="textarea"></el-input>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const textarea = ref('')
const tipsValue = ref('')
const readonly = ref(true)
const formatClick = () => {
  try {
    const v = JSON.parse(textarea.value)
    textarea.value = JSON.stringify(v, null, 2)
    tipsValue.value = ''
  } catch (e: unknown) {
    tipsValue.value = (e as Error).message
  }
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .eltext {
    height: 100%;
    textarea {
      height: 100%;
    }
    .el-textarea__inner {
      height: 100%;
    }
  }

  .el-input {
    width: 100%;
    height: 100%;
  }
}
</style>
